<template>
  <!-- ok -->
  <swiper style="height: calc(260rpx + 24px)" indicator-dots indicator-active-color="#FFFFFF" class="square-dot">
    <swiper-item v-for="(item, index) in menuData" :key="index">
      <view class="wanlpage-menu grid text-center" :class="'col-' + pageData.params.colfive" :style="[pageData.style]">
        <view
          class="item"
          :style="{ 'margin-top': pageData.params.menuMarginTop }"
          v-for="(menu, keys) in item"
          :key="keys"
          @tap="onLink(menu.link)"
        >
          <view
            v-if="pageData.params.menuType === 'icon'"
            class="picicon"
            :class="menu.bgClass"
            :style="{
              height: pageData.params.menuHeightWidth,
              width: pageData.params.menuHeightWidth,
              'margin-bottom': pageData.params.menuMarginBottom,
              'border-radius': pageData.params.menuBorderRadius,
            }"
          >
            <text :class="[menu.icon, menu.iconClass]" :style="{ 'font-size': pageData.params.menuIconSize }"></text>
          </view>

          <view
            v-else
            class="picicon"
            :class="menu.bgClass"
            :style="{
              'margin-bottom': pageData.params.menuMarginBottom,
            }"
          >
            <image
              :src="$wanlshop.oss(menu.iconImage, 100, 0, 1, 'transparent', 'png')"
              :style="{
                height: pageData.params.menuHeightWidth,
                width: pageData.params.menuHeightWidth,
                'border-radius': pageData.params.menuBorderRadius,
              }"
              mode="heightFix"
            ></image>
          </view>
          <view :style="{ 'font-size': pageData.params.menuTextSize }">
            {{ menu.text }}
          </view>
        </view>
      </view>
    </swiper-item>
  </swiper>
</template>
<script>
export default {
  name: 'WanlPageMenu',
  props: {
    pageData: {
      type: Object,
      default: function () {
        return {
          name: '菜单组件',
          type: 'menu',
          params: [],
          style: [],
          data: [],
        };
      },
    },
  },
  computed: {
    menuData() {
      let pageData = this.pageData.data;
      let data = [];
      while (true) {
        data.push(pageData.splice(0, 10));
        if (pageData.length === 0) {
          break;
        }
      }
      return data;
    },
  },
  // 1.0.2升级
  methods: {
    async onLink(url) {
      this.$wanlshop.on(url);
    },
  },
};
</script>
<style lang="scss" scoped>
.square-dot {
  /deep/.uni-swiper-dots {
    bottom: 0;
  }
}
.wanlpage-menu {
  height: 260rpx;
  flex-wrap: wrap;
}
.wanlpage-menu .picicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
